<template>
  <div>
    <p ref="p">msg: {{ msg }}</p>
    <p>msg2: {{ msg2 }}</p>
    <button @click="update">更新msg</button>
  </div>
</template>

<script>
export default {
  name: 'NextTickTest',

  data () {
    return {
      msg: 'abc',
      msg2: 'xxx'
    }
  },
  watch: {
    msg (value) {
      console.log('监视到msg变化了', value)
    }
  },
  methods: {
    update () {
      this.msg = 'abcd'
      // this.msg2 = 'yyy'
      console.log(this.$refs.p.innerHTML, 1)

      Promise.resolve().then(() => {
        console.log(this.$refs.p.innerHTML, '----')
      })

      this.$nextTick(() => {
        console.log(this.$refs.p.innerHTML, this.msg)
      })
      // this.msg = 'abcde'
    }
  }
}
</script>

<style scoped>

</style>
